//引入公共样式
require("../../assets/js/commonCss");
require("./home.less") //引入自己的样式

require("../../lib/swiper/swiper-bundle.min.css") //swiper的css
const Swiper = require("../../lib/swiper/swiper-bundle.min.js") //swiper的js
    //获取axios工具函数
const request = require('../../utils/request')
request.defaults.baseURL = 'http://fitness.h5.itsource.cn:3701'
    // 使用公共尾部
const renderTabbar = require('../../utils/tabbar')
renderTabbar('home')

window.onload = () => {
    //获取dom节点
    const rankNo = document.querySelector('#ranking')
    const clock = document.querySelector('#clockBtn')
    const clockDay = document.querySelector('#clockCount')
    const badge = document.querySelector('#badges')

    //获取打卡信息
    function getClockInfo() {
        request.get('/api/user/clockInInfo').then(res => {
            //解构数据
            let { errno, data } = res.data
                //判断
            if (errno === 0) {
                console.log('data.isClockIn :>> ', data.isClockIn)
                if (data.isClockIn) {
                    clock.textContent = '已打卡'
                    clock.className = 'clocked'
                } else {
                    clock.textContent = '今日打卡'
                    clock.className = 'clock'
                }
            }
        })
    }
    //初始化调用一次
    getClockInfo()

    //获取用户信息
    function getUserInfo() {
        request.get('/api/user/info').then(res => {
            //1 解构数据
            let { errno, data } = res.data
                //2 判断
            if (errno === 0) {
                //3 处理业务逻辑
                render(data)
            }
        })
    }

    //渲染函数 渲染dom更新dom
    function render(data) {
        rankNo.textContent = data.ranking
        clockDay.textContent = data.clockCount
        badge.textContent = data.badges
    }

    //初始化调用一次
    getUserInfo()

    //点击打卡
    clock.addEventListener('click', () => {
        request.post('/api/user/clockIn').then(res => {
            console.log('res.data :>> ', res.data)
                //解构数据
            let { errno, message } = res.data
                //判断
            if (errno === 0) {
                //打卡成功 重新请求数据 自动渲染
                getUserInfo()
                getClockInfo()
            } else {
                alert(message)
            }
        })
    })
}




// 轮播图
new Swiper('.swiper', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
    },
    autoplay: {
        delay: 3000, //间隔时间
        stopOnLastSlide: false, //最后一张图片是否禁用
        disableOnInteraction: false, //用户操作之后是否运动
    },
})